<template>
  <div id="timeLine" style="width: 100%;height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts';
import { useStore } from "vuex";
import data from '../../assets/json/时间轴.json';


export default {
  data() {
    return {
      arr: data,
      inputValue: null
    }
  },
  methods:
  {
    search() {
      this.store.state.time = this.inputValue
    },
    graph() {
      var myChart = echarts.init(document.getElementById("timeLine"))
      var option = {
        tooltip: {
          // triggerOn: 'click',
          formatter: arg => {
            // console.log("数据发生变化")
            //
            return `${arg['name']}年<br>诗词数目:  ${arg['value']}首`;
            // this.count = arg['value']
            // if(arg['value']==0)  this.time="total";
            // else this.time = arg['name'].toString();
            // // this.count=arg['value']
            // Bus.emit('share', [this.time, this.count])
            //   return `<div style="">"隐居匡山读书":"二月，征恒州张果先生，授银青光禄大夫，玄宗亲问以治道神仙之事。果自称生于尧时，位侍中"<br> "《访戴天山道士不遇》当作于此时":"#"<br>"隐居匡山读书":"#"<br> "《访戴天山道士不遇》当作于此时":"#"<br>"隐居匡山读书":"#"<br> "《访戴天山道士不遇》当作于此时":"#"<br> "作《赠江油尉》":"往来旁郡"<br>"作《剑阁赋》":"往来旁郡"<br> "又游梓州，从赵蕤学纵横术，为时一年有余":""</div>`;
          }
        },
        grid: {
          // width:"80%";
          height: "85",
          bottom: "15%"
        },
        dataZoom: [{
          type: 'slider',
          show: false,
          xAxisIndex: [0],
        },
        {
          type: 'inside',
          xAxisData: [0],
        },
        ],
        xAxis: {
          type: 'category',
          data: this.xAxisData,
          axisLabel: {
            textStyle: {
              fontWeight: 'bold', // 设置字体加粗
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 首'
          },
          show: false
        },
        series: [{
          name: '诗词数目',
          type: 'line',
          smooth: true,
          lineStyle: {
            color: "#4f5460", // 你想要的颜色值
          },
          itemStyle: {
            color: "#4f5460", // 节点的颜色
          },
          endLabel: {
            show: true,
            formatter: function (params) {
              return `${params.value}首`
            }
          },
          // areaStyle: {},
          data: this.yAxisData,
        }]
      };
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize();
      });
      myChart.on('click', (params) => {
        // 控制台打印数据的名称
        this.store.state.timeline = params.name
      });
    }
  },
  computed: {
    xAxisData() {
      let xAxisData = new Array(48)
      for (let i = 1; i < this.arr.length; i++) {
        xAxisData[i - 1] = this.arr[i][0]
      }
      return xAxisData
    },
    yAxisData() {
      let yAxisData = new Array(48)
      for (let i = 1; i < this.arr.length; i++) {
        yAxisData[i - 1] = this.arr[i][1]
      }
      return yAxisData
    }
  },
  mounted() {
    this.graph()
  },
  setup() {
    const store = useStore();
    return { store };
  },
}
</script>

<style scoped></style>